<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>注册组件</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
  <style>
  .component {
    text-align: center;
    color: #42b983;
    font-size: 28px;
    font-family: "微软雅黑";
  }
  </style>
</head>

<body>
  <div id="example">
    <!-- 使用注册的组件模板 -->
    <my-component></my-component>
  </div>
  <script type="text/javascript">
  // 注册全局组件,注册组件要在最开始就注册
  Vue.component('my-component', {
    template: "<div class='component'><h1>Hello Vue.js！</h1></div>"
  });
  // new一个vue对象
  new Vue({
    el: "#example"
  });
  </script>
</body>

</html>
